<template>
  <div class="common-details">
    <customDetailsTopbar title="专项任务详情" flag @back="back" />
    <div class="px-1  d-scroll">
      <div class="listInner bg-white px-1 pt-1 pb-1 infoWarp ">
        <custom-title :is-line="true" title="基本信息" />
        <div class="jbxx">
          <custom-details-item v-for="item in descList" :key="item.field" one-color :label="item.label" value="">
            <template #valueSlot>
              <span v-if="!item.isFile">{{ descData[item.field] }}</span>
              <el-link v-else type="primary" @click="openAttachPopUp(descData[item.field])">查看</el-link>
            </template>
          </custom-details-item>
        </div>
        <custom-title :is-line="true" title="检查人员" />
        <div class="common_list table-list" style="padding: 0">
          <template v-if="personList && personList.length>0">
            <div v-for="(item, index) in personList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.userName }}
                  </div>
                  <ul>
                    <li v-for="(desc,index) in personDesc" :key="desc.field">
                      <template v-if="desc.field !== 'workLife'">
                        <i :class="'iconfont c-text-color' + ((index) % 7 + 1)">&#xe67a;</i>
                        <div class="label">{{ desc.label }}：</div>
                        <div class="value">{{ item[desc.field] }}</div>
                      </template>
                      <template v-else>
                        <i :class="'iconfont c-text-color' + ((index) % 7 + 1)">&#xe67a;</i>
                        <div class="label">{{ `从事${$route.query.current.split('管')[0]}${$route.query.current === '安全生产' ? '' : '生产'}相关工作年限` }}：</div>
                        <div class="value">{{ item[desc.field] }}</div>
                      </template>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
        <custom-title :is-line="true" title="其他信息" />
        <div class="qtxx">
          <custom-details-item v-for="item in descList1" :key="item.field" one-color :label="item.label" value="">
            <template #valueSlot>
              <span v-if="!item.isFile">{{ descData[item.field] }}</span>
              <el-link v-else type="primary" @click="openAttachPopUp(descData[item.field])">查看</el-link>
            </template>
          </custom-details-item>
        </div>
      </div>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>

</template>
<script>
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import { specialTaskDetails } from '@/api/commonPage/personnel'
import commonList from '@/assets/mixin/commonList'

export default {
  name: 'SpecialTasksDetailes',
  components: { CustomDetailsTopbar },
  inject: ['layout'],
  mixins: [commonList],
  data() {
    return {
      currentType: '安全',
      descList: [
        { label: '专项任务名称', field: 'specialTaskName' },
        { label: '业务类型', field: 'specialTaskType' },
        { label: '交付时限', field: 'deliverTimeLimit' },
        { label: '任务描述', field: 'describe' },
        { label: '附件', field: 'taskAttachIds', isFile: true }
      ],
      descList1: [
        { label: '任务完成情况', field: 'taskFinishSituation' },
        { label: '提交时间', field: 'submitTime' },
        { label: '提交人员', field: 'expertName' },
        { label: '附件', field: 'feedbackAttachIds', isFile: true }
      ],
      personList: [],
      personDesc: [
        { label: '角色', field: 'expertRole' },
        // { label: '姓名', field: 'userName' },
        { label: '专业类别', field: 'expertCategory' },
        { label: '性别', field: 'sex' },
        { label: '年龄', field: 'age' },
        { label: '联系电话', field: 'phone' },
        { label: '学历', field: 'educationLevel' },
        { label: '职称', field: 'jobTitle' },
        { label: '工作单位', field: 'workUnit' },
        { label: '职务', field: 'job' },
        { label: `从事${this.$route.query.currentType}生产相关工作年限`, field: 'workLife' }
      ],
      descData: {}
    }
  },
  async mounted() {
    this.layout.showAreaLoading(['.jbxx', '.table-list', '.qtxx'])
    this.currentType = this.$route.query.currentType
    const { data, status } = await specialTaskDetails({ specialTaskId: this.$route.query.specialTaskId })
    if (data && status === 0) {
      this.descData = data
      switch (this.$route.query.current) {
        case '环保管理':
          this.personList = data.hbCheckExpertList
          break
        case '安全生产':
          this.personList = data.aqCheckExpertList
          break
        case '消防管理':
          this.personList = data.xfCheckExpertList
          break
        case '能源管理':
          this.personList = data.nyCheckExpertList
          break
        default:
          this.personList = []
      }
    }
    this.layout.hideAreaLoading(['.jbxx', '.table-list', '.qtxx'])
  },
  methods: {
    back() {
      this.$router.replace({
        path: '/staging/personnelDetails',
        query: { id: this.$route.query.id, current: this.$route.query.current, active: this.$route.query.active, type: this.$route.query.type }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
